<template>
    <view class="main">
        <view class="header_box">
            <view class="biaoti_box">
                <view class="left_icon_box" @click="back">
                    <image src="https://www.dingxians.cn/upload/20250324/67e13c80ecef6.png" mode="scaleToFill" />
                </view>
                <view class="center_biaoti_box">
                    进阶
                </view>
                <view class="left_icon_box">
                    <!-- 占位 -->
                </view>
            </view>
        </view>
        <!-- 轮播 -->
        <view class="swiper_box">
            <tn-swiper :list="swiperList" effect3dPreviousSpacing="210" height="348" radius="0" :effect3d="true"
                @change="swsiperChange" :current="currentSwiper" mask :autoplay="false"></tn-swiper>
        </view>
        <!-- 价格 -->
        <view class="jiage_bpox">
            <view class="jiage_zs_box">价格</view>
            <view class="jiagekuang_zs_box"
                style="background-image: url('https://www.dingxians.cn/upload/20250422/680740a385567.png');">
                {{ swiperList[currentSwiper].recovery_price }}
                <text style="font-size: 20rpx;">￥</text>
            </view>
        </view>
        <!-- 已进阶 -->
        <view class="yjj_box">
            已进阶 <text style="color: #DED000;">{{ swiperList[currentSwiper].residue_num }}</text>
        </view>
        <!-- 进度条 -->
        <view class="jindutiao_box">
            <text>进阶程度</text>
            <text>已选<text style="color: #DED000;">（{{ selBonusPrice }}）</text></text>
            <text>{{ (percentage * 1) > 100 ? '100' : percentage }}%</text>
        </view>
        <view class="zs_jd_box" style="margin-bottom: 30rpx;">
            <tn-line-progress :percent="percentage" activeColor="#DED000"
                inactiveColor="rgba(255, 255, 255, .2)" height="20"></tn-line-progress>
        </view>
        <view class="jindutiao_box">
            <text>进阶数量</text>
            <text></text>
            <text>X{{ sliderValue }}</text>
        </view>
        <view class="zs_jd_box1">
            <view class="jia_box active" @click="minues">
                <image src="https://www.dingxians.cn/upload/20250422/68073e2a7892a.png" mode="scaleToFill" />
            </view>
            <view class="zhongjian_box">
                <tn-slider activeColor="#DED000" :min="1" :max="100" blockColor="#DED000"
                    inactiveColor="rgba(255, 255, 255, .2)" v-model="sliderValue" lineHeight="60">
                    <view class="tn-slider__custom-block">
                        {{ sliderValue }}
                    </view>
                </tn-slider>
            </view>
            <view class="jia_box active" @click="plus">
                <image src="https://www.dingxians.cn/upload/20250422/68073e2abe570.png" mode="scaleToFill" />
            </view>
        </view>
        <!-- 进阶材料 -->
        <view class="cailiao_box"
            style="background-image: url('https://www.dingxians.cn/upload/20250402/67ed233c2a0b8.png');">
            <view class="jinjicailiao_box">
                <view class="left_box"></view>
                <view class="center_box">进阶材料</view>
                <view class="right_box">

                    <view class="tyxy" @click="isAllsel"
                        :style="{ border: `1px solid ${isAllSelect ? '#DED000' : '#ffffff'}` }">
                        <image v-if="isAllSelect" src="https://www.dingxians.cn/images/common/selected.png"
                            mode="scaleToFill" />
                    </view>
                    <view class="allxuanze_etx_box">{{ isAllSelect ? '取消' : '全选' }}</view>
                </view>
            </view>
            <z-paging ref="paging" v-model="fipList" :fixed="false" @query="queryList" :refresher-enabled="false">
                <view class="cailiao_nbeirong_box">
                    <view class="dange_box" v-for="(item, index) in fipList" :key="index">
                        <view class="top_box" @click="bonusBtn(item)"
                            style="background-image: url('https://www.dingxians.cn/upload/20250422/68073b4dd0092.png');">
                            <view class="image_box">
                                <image :src="item.box_prize_image" mode="scaleToFill" />
                            </view>

                            <view class="sel_img_box"
                                style="background-image: url('https://www.dingxians.cn/images/common/unselected.png');">
                                <image v-if="item.flag" src="https://www.dingxians.cn/images/common/selected.png"
                                    mode="scaleToFill" />
                            </view>
                        </view>
                        <view class="name_box">
                            <tn-notice-bar :leftIcon="false" speed='20' :list="[item.box_prize_name]" mode="horizontal"
                                color="rgba(255, 255, 255, .7)"></tn-notice-bar>
                        </view>
                        <view class="shuliang_box">
                            <u-number-box v-model="item.setpValue" :max="item.num"
                                style="display: flex;justify-content: space-between;align-items: center;">
                                <view slot="minus" class="minus"
                                    style="background-image: url('https://www.dingxians.cn/upload/20250422/68073e2a7892a.png');">
                                </view>
                                <text slot="input" style="width: 50rpx;text-align: center;" class="input">{{
                                    item.setpValue }}</text>
                                <view slot="plus" class="plus"
                                    style="background-image: url('https://www.dingxians.cn/upload/20250422/68073e2abe570.png');">
                                </view>
                            </u-number-box>
                        </view>
                    </view>
                    <view style="width:131rpx" v-for="i in 3"></view>
                </view>
            </z-paging>
        </view>

        <!-- 确认进阶 -->
        <view class="jinjiequeren_box" @click="submit" style="background-image: url('https://www.dingxians.cn/upload/20250422/68073ee555920.png');">确认进阶</view>
        <view style="height: 200rpx;"></view>
        <uni-popup ref="Resultpopup" type="center" mask-background-color="rgba(0,0,0,0.8)">
            <view class="result_big_box">
                <view class="gxhd_box">
                    <image src="https://www.dingxians.cn/upload/20250330/67e91c2da3944.png" mode="widthFix" />
                </view>
                    <view class="jpqy_box">
                        <view class="dange_box" v-for="item, index in prizeData" :key="index"
                            style="background-image: url('https://www.dingxians.cn/upload/user_static/index/bg-draw-legend.png');">
                            <view class="dengji_name_box">{{ item.level_name }}</view>
                            <view class="shang_pin_box">
                                <image :src="item.blind_box_prize_image" mode="scaleToFill" />
                            </view>
                            <view class="jiage_box">
                                <view class="l_box">￥{{ item.recovery_price || '0.00' }}</view>
                                <view class="r_box">x1</view>
                            </view>
                            <view class="jg_name_box">{{ item.blind_box_prize_name }}</view>
                        </view>
                    </view>
                <view class="dibu_box">
                    <view class="wenzi_box">已为您存放至盒柜 <text style="color: #DED000;"
                            @click="header('/pages/box/index', 2)">前往盒柜</text>
                    </view>
                    <view class="anniu_box">
                        <view class="left_an_box" @click="closeResultpop"
                            style="background-image: url('https://www.dingxians.cn/upload/20250330/67e935095ff58.png');">
                            关闭
                        </view>
                        <view class="right_an_box"
                            style="background-image: url('https://www.dingxians.cn/upload/20250330/67e935095ee32.png');"
                            @click="closeResultpop">
                            继续进阶
                        </view>
                    </view>

                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import api from '../../api/index.js'
// import blidboxdrawResult from "../components/blidboxdrawResult.vue";
export default {
    // components: { blidboxdrawResult },
    data() {
        return {
            noClick: true,//节流
            swiperList: [
                {
                    image: '',
                    recovery_price: '',
                    residue_num: '',
                }
            ],
            currentSwiper: 0,//当前第几张0：1
            currentSwiper1: 0,//当前第几张0：1
            percent: 80,//进度条百分比
            sliderValue: 1,//滑动数量
            isAllSelect: false,//是否全选
            fipList: [],//进阶材料列表
            xuazede: {
                id: '1',
            },//列表点击传递的对象
            drawResultShow: false,//进阶成功奖品弹窗
            prizeData: [],//进阶结果数据

        };
    },
    computed: {
        // 选中的商品id
        selectBonusId() {
            return this.fipList.filter(item => {
                return item.flag == true
            }).map(item => {
                return item.id + ':' + item.setpValue
            })
        },
        // 选中的商品总兑换价
        selBonusPrice() {
            var total = 0;
            this.fipList.filter(item => {
                return item.flag == true
            }).forEach((item) => {
                total += (item.price * item.setpValue)
            })
            return total.toFixed(2);
        },
        // 可兑换赏品的总数
        selbonusNum() {
            let total_num = 0;
            this.fipList.filter(item => {
                return item.flag == true
            }).forEach((item) => {
                total_num += item.setpValue
            })
            return total_num;
        },
        // 选中的商品list用于creat页展示、获取id
        selHouObj() {
            let housArr = [];
            this.fipList.filter(item => {
                return item.flag == true
            }).forEach((item) => {
                housArr.push(item)
            })
            return housArr;
        },
        // 选中的商品总兑换价
        selBonusPrice() {
            var total = 0;
            this.fipList.filter(item => {
                return item.flag == true
            }).forEach((item) => {
                total += (item.price * item.setpValue)
            })
            return total.toFixed(2);
        },
        // 进度条百分比
        percentage() {
            var num = 0
            this.fipList.filter(item => {
                return item.flag == true
            }).forEach(item => {
                num += (((item.price * 1) * (item.setpValue * 1)) / ((this.xuazede.price * 1) * (this.sliderValue * 1))) * 100
            })
            return num.toFixed(2)
        }
    },
    onLoad(e) {
        this.currentSwiper1 = e.index || 0//媒介
        this.xuazede = JSON.parse(e.item)
    },
    onShow() {
        uni.$emit("onPageScroll", 0)
        this.getData()
    },
    methods: {
        back() {
            uni.navigateBack({ delta: 1 })
        },
        // 轮播
        getData() {
            api.bonus.fusionPrizes()
                .then((res) => {
                    if (res.code == 200) {
                        res.data.data.forEach((item) => {
                            item.image = item.goods_image
                        });
                        this.swiperList = res.data.data
                        this.currentSwiper = this.currentSwiper1
                    }
                })
        },
        // 轮播切换
        swsiperChange(e) {
            this.currentSwiper = e
            this.xuazede = this.swiperList[e]
        },
        // 减
        minues() {
            if (this.sliderValue > 1) {
                this.sliderValue--
            } else {
                this.$msg('数量不能少于1')
            }
        },
        // 加
        plus() {
            if (this.sliderValue < 100) {
                this.sliderValue++
            } else {
                this.$msg('数量不能大于100')
            }
        },
        //是否全选
        isAllsel() {
            if (this.fipList.length > 0) {
                this.isAllSelect = !this.isAllSelect
                this.fipList.forEach(item => {
                    if (this.isAllSelect) {
                        item.flag = true
                    } else {
                        item.flag = false
                    }
                })
            } else {
                this.$msg('暂无商品，无法选择！')
            }

        },
        // 材料列表
        queryList(pageNo, pageSize) {
            let data = {
                status: 1,
                page: pageNo,
                limit: pageSize,
            }

            api.bonus.boxOrderPrizes(data)
                .then((res) => {
                    if (res.code == 200) {
                        res.data.data.forEach((item) => {
                            item.flag = false
                            item.setpValue = item.num
                            this.$store.state.canadvList.forEach((val) => {
                                if (item.id == val.id) {
                                    item.flag = true
                                }
                            })
                        });
                        this.$refs.paging.complete(res.data.data)
                    }
                })


            // this.$Request.get(this.$api.bonus.boxOrderPrizes, data).then(res => {
            //     if (res.code == 200) {
            //         res.data.data.forEach((item) => {
            //             item.flag = false
            //             item.setpValue = item.num
            //             this.$store.state.canadvList.forEach((val) => {
            //                 if (item.id == val.id) {
            //                     item.flag = true
            //                 }
            //             })
            //         });
            //         this.$refs.paging.complete(res.data.data)
            //     }
            // })
        },
        // 选择赏袋赏品
        bonusBtn(item) {
            item.flag = !item.flag
            console.log(this.selbonusNum, '需要操作的赏品总数')
            console.log(this.selBonusPrice, '需要操作的赏品总兑换价格')
            console.log(this.selHouObj, '需要操作的赏品列表')
        },
        // 确认进阶
        submit() {
            let that = this
            let data = {
                prize_id: that.xuazede.id,
                params: that.selectBonusId.join(','),
                num: that.sliderValue
            }
            uni.showModal({
                title: "确认进阶？",
                success: function (res) {
                    if (res.confirm) {
                        api.bonus.advancePrizesStore(data)
                            .then((res) => {
                                if (res.code == 200) {
                                    that.show(res.msg)
                                    setTimeout(() => {
                                        that.prizeData = [{
                                            blind_box_prize_name: that.xuazede.goods_name,
                                            recovery_price: that.xuazede.price,
                                            level_name: that.xuazede.level.name,
                                            blind_box_prize_image: that.xuazede.goods_image,
                                            box_prize_level: that.xuazede.level_id,
                                            num: res.data
                                        }]
                                        that.$refs.Resultpopup.open()
                                        that.$refs.paging.reload()
                                        uni.setStorageSync('bonusRnter', true)
                                        that.getData()
                                    }, 500)
                                } else {
                                    that.show(res.msg)
                                }
                            })
                    } else {
                        console.log('取消')
                    }
                }
            })


        },
        closeResultpop(){
            this.$refs.Resultpopup.
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            close()
        }
    },
};
</script>

<style lang="scss" scoped>
::v-deep.zp-scroll-view-absolute {
    background-color: transparent !important;
    background-image: none !important;
}

::v-deep.tn-popup__mask {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

::v-deep.tn-row-notice-class {
    padding: 0 0 !important;
}

::v-deep.zp-l-container {
    margin: 0 !important;
}

.main {
    width: 100vw;
    min-height: 100vh;
    background-color: #000;

    .header_box {
        width: 750rpx;
        height: 180rpx;
        box-sizing: border-box;
        padding-top: 92rpx;

        .biaoti_box {
            width: 100%;
            height: 88rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20rpx;

            .left_icon_box {
                width: 80rpx;
                height: 80rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .center_biaoti_box {
                width: 380rpx;
                height: 88rpx;
                line-height: 88rpx;
                text-align: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 40rpx;
                color: #fff;
                font-weight: 900;
            }
        }
    }

    .swiper_box {
        width: 640rpx;
        height: 348rpx;
        margin: auto;
        position: relative;
        margin-bottom: 29rpx;
    }

    .jiage_bpox {
        width: 100%;
        height: 46rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30rpx;

        .jiage_zs_box {
            height: 20rpx;
            line-height: 20rpx;
            font-family: Source Han Serif CN;
            font-weight: bold;
            font-size: 20rpx;
            color: #FFFFFF;
        }

        .jiagekuang_zs_box {
            width: 188rpx;
            height: 46rpx;
            line-height: 46rpx;
            text-align: center;
            background-size: 100% 100%;
            font-family: FZZongYi-M05S;
            font-weight: 400;
            font-size: 31rpx;
            color: #FFFFFF;
            margin-left: 10rpx;
        }
    }

    .yjj_box {
        width: 100%;
        height: 31rpx;
        line-height: 31rpx;
        font-family: Source Han Serif CN;
        font-weight: bold;
        font-size: 30rpx;
        color: #FFFFFF;
        text-align: center;
        margin-bottom: 20rpx;
    }

    .jindutiao_box {
        width: 100%;
        height: 20rpx;
        line-height: 20rpx;
        font-family: Source Han Serif CN;
        font-weight: bold;
        font-size: 20rpx;
        color: #FFFFFF;
        box-sizing: border-box;
        padding: 0 67rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;
    }

    .zs_jd_box {
        width: 690rpx;
        height: 20rpx;
        margin: auto;
    }

    .zs_jd_box1 {
        width: 690rpx;
        height: 100rpx;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .jia_box {
            width: 60rpx;
            height: 60rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            image {
                width: 60rpx;
                height: 60rpx;
            }
        }

        .zhongjian_box {
            width: 520rpx;
            height: 100rpx;
        }

        .tn-slider__custom-block {
            background-color: #DED000;
            width: auto;
            height: 40rpx;
            line-height: 40rpx;
            padding: 0 5rpx;
            border-radius: 50%;
            text-align: center;
            color: #FFFFFF;
        }
    }

    .cailiao_box {
        width: 710rpx;
        height: 611rpx;
        margin: 20rpx auto;
        background-size: 100% 100%;
        box-sizing: border-box;
        padding-top: 40rpx;

        .jinjicailiao_box {
            width: 100%;
            display: flex;
            height: 29rpx;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            padding: 0 30rpx;
            margin-bottom: 20rpx;

            .left_box {
                width: 80rpx;
            }

            .center_box {
                height: 29rpx;
                width: 200rpx;
                text-align: center;
                line-height: 29rpx;
                font-family: Source Han Serif CN;
                font-weight: bold;
                font-size: 30rpx;
                color: #FFFFFF;
            }

            .right_box {
                height: 100%;
                display: flex;
                justify-content: flex-end;
                align-items: center;

                .tyxy {
                    width: 40rpx;
                    height: 40rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 10rpx;

                    image {
                        display: block;
                        width: 16rpx;
                        height: 22rpx;
                    }
                }

                .allxuanze_etx_box {
                    height: 106rpx;
                    line-height: 106rpx;
                    font-family: Source Han Serif CN;
                    font-weight: 400;
                    font-size: 20rpx;
                    color: rgba(255, 255, 255, .5);
                }
            }
        }

        .cailiao_nbeirong_box {
            width: 100%;
            height: 446rpx;
            box-sizing: border-box;
            padding: 0 30rpx;
            overflow: hidden;
            overflow-y: auto;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .dange_box {
                width: 131rpx;
                height: 256rpx;
                margin-bottom: 30rpx;
                flex-shrink: 0;

                .top_box {
                    width: 131rpx;
                    height: 186rpx;
                    background-size: 100% 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;

                    .sel_img_box {
                        position: absolute;
                        right: 0;
                        bottom: 10rpx;
                        width: 50rpx;
                        height: 50rpx;
                        background-size: 100% 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        image {
                            width: 40rpx;
                            height: 40rpx;
                        }
                    }

                    .image_box {
                        width: 85rpx;
                        height: 104rpx;

                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }

                .name_box {
                    width: 90%;
                    margin: auto;
                    height: 19rpx;
                    font-family: Source Han Serif CN;
                    font-weight: bold;
                    font-size: 20rpx;
                    color: #FFFFFF;
                    margin-bottom: 18rpx;
                }

                .shuliang_box {
                    width: 90%;
                    height: 40rpx;
                    margin: auto;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .minus {
                        width: 30rpx;
                        height: 30rpx;
                        background-size: 100% 100%;
                    }

                    .input {
                        height: 30rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        font-size: 28rpx;
                        color: #FFFFFF;
                        line-height: 30rpx;
                    }

                    .plus {
                        width: 30rpx;
                        height: 30rpx;
                        background-size: 100% 100%;
                    }
                }
            }
        }
    }

    .jinjiequeren_box {
        margin: 30rpx auto;
        width: 610rpx;
        text-align: center;
        font-size: 28rpx;
        font-weight: 900;
        color: #fff;
        line-height: 100rpx;
        height: 100rpx;
        background-size: 100% 100%;
    }
}



.result_big_box {
    width: 750rpx;
    height: 1400rpx;

    // background-color: pink;
    .gxhd_box {
        width: 599rpx;
        height: 104rpx;
        margin: auto;
        margin-bottom: 100rpx;

        image {
            width: 100%;
        }
    }

    .jpqy_box {
        width: 100%;
        height: 900rpx;
        // background-color: pink;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30rpx;

        .dange_box {
            width: 540rpx;
            height: 720rpx;
            background-size: 100% 100%;
            position: relative;
            box-sizing: border-box;
            padding-top: 70rpx;

            .dengji_name_box {
                top: 0;
                left: 0;
                position: absolute;
                box-sizing: border-box;
                width: 100%;
                height: 130rpx;
                font-weight: 900;
                line-height: 130rpx;
                font-size: 56rpx;
                background: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                padding-left: 20rpx;
            }

            .shang_pin_box {
                width: 400rpx;
                height: 400rpx;
                margin: auto;
                margin-bottom: 20rpx;

                image {
                    width: 100%;
                    height: 400rpx;
                }
            }

            .jiage_box {
                width: 100%;
                height: 100rpx;
                line-height: 100rpx;
                box-sizing: border-box;
                padding: 0 70rpx;
                display: flex;
                justify-content: space-between;

                .l_box {
                    font-size: 40rpx;
                    font-weight: 900;
                    color: #fff;
                }

                .r_box {
                    font-size: 40rpx;
                    font-weight: 900;
                    color: #ccc;
                }
            }

            .jg_name_box {
                box-sizing: border-box;
                font-size: 32rpx;
                width: 100%;
                padding: 0 70rpx;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                color: #fff;
                /* 限制为 3 行 */
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }
    }


    .dibu_box {
        width: 100%;

        .wenzi_box {
            width: 100%;
            height: 30rpx;
            line-height: 30rpx;
            font-size: 26rpx;
            font-weight: normal;
            line-height: 30rpx;
            letter-spacing: normal;
            color: #FFFFFF;
            text-align: center;
            margin-bottom: 30rpx;
        }

        .anniu_box {
            width: 610rpx;
            height: 84rpx;
            margin: auto;
            display: flex;
            justify-content: space-between;

            .left_an_box,
            .right_an_box {
                width: 276rpx;
                height: 84rpx;
                background-size: 100% 100%;
                line-height: 84rpx;
                color: #fff;
                font-size: 34rpx;
                text-align: center;
                font-weight: 700;
            }

        }
    }
}
</style>